<template>
  <el-container>
    <el-header height="40px" style="background-color: #00838f;">
      <h5 style="color: #fff;line-height: 40px;font-family: 'Microsoft YaHei',serif">管理员信息</h5>
    </el-header>
    <el-main style="background-color: #fff;">
      <div>
        <el-input placeholder="请输入内容" v-model="search.value" class="mess" span="12" clearable @clear="updateData">
          <el-select v-model="search.method" slot="prepend" placeholder="请选择" :value="search.method">
            <el-option label="工号" value="工号"></el-option>
            <el-option label="员工姓名" value="员工姓名"></el-option>
            <el-option label="角色" value="角色"></el-option>
            <el-option label="状态" value="状态"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="dataFilter"></el-button>
        </el-input>
      </div>
      <el-table
        ref="multipleTable"
        :data="dataList.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column align="center"
                         label="登陆工号">
          <template slot-scope="scope">
            {{ scope.row.employee_id }}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="员工姓名">
          <template slot-scope="scope">
            {{ scope.row.employee_name }}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="电话号码">
          <template slot-scope="scope">
            {{ scope.row.employee_tel}}
          </template>
        </el-table-column>
        <!--<el-table-column align="center"-->
                         <!--label="邮箱"-->
                         <!--width="150">-->
          <!--<template slot-scope="scope">-->
            <!--{{ scope.row.employee_email}}-->
          <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column align="center"
                         label="角色">
          <template slot-scope="scope">
            {{ scope.row.employee_level }}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="添加时间">
          <template slot-scope="scope">
            {{ scope.row.reg_time }}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="状态">
          <template slot-scope="scope">
            <el-tag :type="buttonChange(scope.row.employee_status).StatusColor">
              {{scope.row.employee_status}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column  align="center" fixed="right" label="操作" width="250">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              @click="handleCheck(scope.$index, scope.row)">查看
            </el-button>
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row) ">编辑</el-button>
            <!--<editbtn @click.native="handleEdit(scope.$index, scope.row)" :adminData="scope.row">-->
            <!--</editbtn>-->
            <el-button
              size="mini"
              :type="buttonChange(scope.row.employee_status).color"
              @click="handleChange(scope.$index, scope.row)">{{buttonChange(scope.row.employee_status).string}}</el-button>
            <!--<el-button-->
              <!--size="mini"-->
              <!--type="danger"-->
              <!--@click="handleDel(scope.$index, scope.row)">删除-->
            <!--</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button type="primary" size="mini" @click="dialogVisible = true">添加</el-button>
        <!--<el-button type="danger" size="mini" @click="handleDisable">全部停用</el-button>-->
        <!--<el-button type="success" size="mini" @click="handleEnable">全部启用</el-button>-->
        <el-button type="info" size="mini" disabled>导出 Excel</el-button>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page= 'currentPage'
          :page-sizes="[10, 20, 50, 100]"
          :page-size= 'pageSize'
          layout="total, sizes, prev, pager, next, jumper"
          :total="dataList.length">
        </el-pagination>
      </div>
    </el-main>
    <!--编辑弹框-->
    <el-dialog
      title="编辑管理员信息"
      :visible.sync="editdialogVisible"
      :modal-append-to-body="false"
      width="30%"
      :before-close="handleClose">
      <el-form :model="editForm" :rules="rules" ref="editForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="登陆工号：" prop="loginName" >
          <el-input v-model="editForm.loginName" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-form-item label="初始密码：" prop="pass">
          <el-input type="password" v-model="editForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码：" prop="checkPass">
          <el-input type="password" v-model="editForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名：" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="年 龄：" prop="age">
          <el-input v-model.number="editForm.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性 别：" prop="sex">
          <el-radio-group v-model="editForm.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手 机：" prop="phone">
          <el-input v-model="editForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮 箱：" prop="email">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
        <el-form-item label="用户角色：" prop="position">
          <el-select v-model="editForm.position" placeholder="-- 请选择管理角色 --">
            <el-option label="超级管理员" value="超级管理员"></el-option>
            <el-option label="普通管理员" value="普通管理员"></el-option>
            <el-option label="门店管理员" value="门店管理员"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="添加时间" prop="time">
          <el-input v-model="editForm.time" readonly></el-input>
        </el-form-item>
        <el-form-item label="是否启用" prop="status">
          <el-switch v-model="editForm.status" active-value="启用"
                     inactive-value="停用"></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="resetForm('editForm')">重置</el-button>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
    <el-button @click="editdialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editSubmitForm">确 定</el-button>
  </span>
    </el-dialog>
    <!--添加弹框-->
    <el-dialog
      title="添加管理员信息"
      :visible.sync="dialogVisible"
      :modal-append-to-body="false"
      width="30%"
      :before-close="handleClose">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="登陆工号" prop="loginName">
          <el-input v-model="ruleForm.loginId" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="初始密码" prop="pass">
          <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="年 龄" prop="age">
          <el-input v-model.number="ruleForm.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性 别" prop="sex">
          <el-radio-group v-model="ruleForm.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手 机" prop="phone">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮 箱" prop="email">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>
        <el-form-item label="用户角色" prop="position">
          <el-select v-model="ruleForm.position" placeholder="-- 请选择管理角色 --">
            <el-option label="超级管理员" value="超级管理员"></el-option>
            <el-option label="普通管理员" value="普通管理员"></el-option>
            <el-option label="门店管理员" value="门店管理员"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="添加时间" prop="email">
          <el-input v-model="ruleForm.time" disabled></el-input>
        </el-form-item>
        <el-form-item label="是否启用" prop="status">
          <el-switch v-model="ruleForm.status" active-value="启用"
                     inactive-value="停用"></el-switch>
        </el-form-item>
        <el-form-item>
          <!--<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>-->
          <el-button type="danger" @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
  </span>
    </el-dialog>
    <!--查看弹框-->
    <el-dialog title="管理员详情表" :visible.sync="checkdialogVisible">
      <el-table :data="checkData">
        <el-table-column property="name" label="类目名" width="150" align="center"></el-table-column>
        <el-table-column property="date" label="数据" width="500" align="center"></el-table-column>
      </el-table>
    </el-dialog>
  </el-container>
</template>

<script>
    export default {
        name: "administrator",
      components: {
      },
      //表格数据的操作方法
      data() {
        let validatePass = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入密码'));
          } else {
            if (this.ruleForm.checkPass !== '') {
              this.$refs.ruleForm.validateField('checkPass');
            }
            callback();
          }
        };
        let validatePass2 = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请再次输入密码'));
          } else if (value !== this.ruleForm.pass) {
            callback(new Error('两次输入密码不一致!'));
          } else {
            callback();
          }
        };
        let validatePhone = (rule, value, callback) => {
          let reg = /0?(13|14|15|18)[0-9]{9}/;
          let result = reg.test(value);
          if (value === '') {
            callback(new Error('请输入手机号码'));
          } else if (!result) {
            callback(new Error('手机号码输入不正确！'));
          } else {
            callback();
          }
        };
        return {
          editdialogVisible:false,//编辑弹框初始状态
          dialogVisible: false,//添加弹框初始状态
          checkdialogVisible: false,//查看弹框初始状态
          currentPage: 1,
          pageSize: 10,
          pageIndex: 1,
          //初始表格数据
          dataList: [],
          //状态
          statusData:{
            status:'',
            id:''
          },
          //删除
          // delData:{
          //   id:''
          // },
          //编辑
          editForm: {
            loginName: '',
            pass: '',
            checkPass: '',
            name: '',
            age: '',
            sex: '',
            phone: '',
            email: '',
            position: '',
            status:'',
            time:''
          },
          //添加
          ruleForm: {
            loginId: '',
            pass: '',
            checkPass: '',
            name: '',
            age: '',
            sex: '',
            phone: '',
            email: '',
            position: '',
            time:'',
            status:''
          },
          //查看
          checkData:[],
          //规则
          rules: {
            // loginName: [
            //   {required: true, message: '不能修改登陆工号', trigger: 'blur'},
            // ],
            password1: [
              {required: true, message: '请选择活动区域', trigger: 'change'}
            ],
            pass: [
              {validator: validatePass, required: true, trigger: 'blur'}
            ],
            checkPass: [
              {validator: validatePass2, required: true, trigger: 'blur'}
            ],
            position: [
              {required: true, message: '请选择管理角色', trigger: 'change'}
            ],
            name: [
              {required: true, message: '请输入管理人员真实姓名', trigger: 'blur'},
              {min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
            ],
            age: [
              {required: true, type: 'number', message: '年龄必须为数字值', trigger: 'blur'},
            ],
            sex: [
              {required: true, message: '请选择性别', trigger: 'change'}
            ],
            phone: [
              {validator: validatePhone, required: true, trigger: 'blur'}
            ],
            email: [
              {required: false, type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
            ]
          },
          search: {
            method: '工号',
            value: null
          },
        }
      },
      methods: {
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {});
        },
        //分页
        handleSizeChange (val) {
          this.pageSize = val
        },
        handleCurrentChange (val) {
          this.currentPage = val
        },
        // 选中行
        handleSelectionChange(val) {
          console.log('val:', val)
        },
        // 编辑
        handleEdit(index, row) {
          this.editdialogVisible = true
          this.editForm.loginName=row.employee_id
          this.editForm.pass=row.employee_password
          this.editForm.checkPass=row.employee_password
          this.editForm.name=row.employee_name
          this.editForm.age=row.employee_age
          this.editForm.sex=row.employee_sex
          this.editForm.phone=row.employee_tel
          this.editForm.email=row.employee_email
          this.editForm.position=row.employee_level
          this.editForm.status=row.employee_status
          this.editForm.time=row.reg_time
          // console.log(' index:', index)
          // console.log(' row:', row)
        },
        //编辑提交
        editSubmitForm() {
            console.log(this.editForm)
            this.$axiosx.get('/api/backGetAdminEdit',{params:this.editForm})
              .then((response)=>{
                  this.$message({
                    type: response.data,
                    message: '编辑成功'
                  })
                  this.updateData()

              }).catch((error)=>{
                  this.$message({
                    type: 'info',
                    message: '操作失败，请重试！'
                  })
                })
          this.editdialogVisible=false
        },
        //添加提交
        submitForm(formName) {
          let judge=false
          this.$refs[formName].validate((valid) => {
            if (valid) {
              judge=true
            } else {
              console.log('error submit!!');
              return false;
            }
          });
          if (judge){
              console.log(this.ruleForm)
              this.$axiosx.get('/api/backGetAdminAdd',{params:this.ruleForm})
                .then((response)=>{
                    this.$message({
                      type: 'success',
                      message: '添加成功'
                    })
                  this.updateData()
                }).catch((error)=>{
                console.log(error.message)
              })
            this.dialogVisible=false
          }
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
        //查看
        handleCheck(index, row) {
          this.checkdialogVisible = true;
          // console.log(' index:', index);
          // console.log(' row:', row);
          this.checkData=[
            {name:"登陆工号", date:row.employee_id},
            {name:"用户姓名", date:row.employee_name},
            {name:"年龄", date:row.employee_age},
            {name:"性别", date:row.employee_sex},
            {name:"电话号码", date:row.employee_tel},
            {name:"邮箱", date:row.employee_email},
            {name:"权限", date:row.employee_level},
            {name:"注册时间", date:row.reg_time},
            {name:"状态", date:row.employee_status},
          ];
        },
        handleDisable () {
        },
        handleEnable () {
        },
        // 停用
        handleChange(index, row) {
          // console.log(index)
          this.statusData.id=row.employee_id
          this.statusData.status=row.employee_status
          let statusFont
          if (row.employee_status==='启用'){
            statusFont='停用'
          } else{
            statusFont='启用'
          }
          // console.log(' index:', index)
          // console.log('row:', row.employee_status)
          // console.log('row:',row.employee_id)
          this.$confirm(`是否${statusFont}?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(()=>{
            this.$axiosx.get('/api/backGetStatus',{params:this.statusData})
              .then((response)=>{
                if (response.data === 'success') {
                  this.$message({
                    type: response.data,
                    message: '操作成功'
                  })
                  this.updateData()
                }
              })
          })
        },
        //删除
        // handleDel(index, row){
        //   // console.log('row:', row)
        //   // console.log('row:',row.employee_id)
        //   this.delData.id=row.employee_id
        //   this.$confirm(`是否删除?`, '提示', {
        //     confirmButtonText: '确定',
        //     cancelButtonText: '取消',
        //     type: 'warning'
        //   }).then(()=>{
        //     this.$axiosx.get('/api/backGetDel',{params:this.delData})
        //       .then((response)=>{
        //         if (response.data === 'success') {
        //           this.$message({
        //             type: response.data,
        //             message: '操作成功'
        //           })
        //           this.updateData()
        //         }
        //       })
        //
        //   })
        // },
        //搜索
        //查询
        dataFilter(){
          switch (this.search.method) {
            case '工号':
              this.dataList.forEach((val, index, arr) => {
                if (val.employee_id === parseFloat(this.search.value)) {
                  this.dataList = [val]
                }
              })
              break
            case '员工姓名':
              let showData = []
              this.dataList.forEach((val, index, arr) => {
                if (val.employee_name.indexOf(this.search.value) >= 0) {
                  showData.push(val)
                }
              })
              this.dataList = showData
              break
            case '角色':
              let showData1 = []
              this.dataList.forEach((val, index, arr) => {
                if (val.employee_level.indexOf(this.search.value) >= 0) {
                  showData1.push(val)
                }
              })
              this.dataList = showData1
              break
            case '状态':
              let showData2 = []
              this.dataList.forEach((val, index, arr) => {
                if (val.employee_status.indexOf(this.search.value) >= 0) {
                  showData2.push(val)
                }
              })
              this.dataList = showData2
              break
          }
        },
        //状态按钮颜色、字体转换
        buttonChange (param) {
          if (param === '启用') {
            return {
              string: '停用',
              color: 'danger',
              StatusColor: 'success'
            }
          } else {
            return {
              string: '启用',
              color: 'success',
              StatusColor: 'danger'
            }
          }
        },
        updateData(){
          this.$axiosx.get('/api/backGetAdministrator')
            .then((resopnse)=>{
              // console.log(resopnse.data);
              this.dataList=resopnse.data
            })
        }
      },
      created(){
          // this.updateData()
        this.$axiosx.get('/api/backGetAdministrator')
          .then((resopnse)=>{
            // console.log(resopnse.data);
            this.dataList=resopnse.data
          })
      }
    }
</script>

<style scoped>
  .el-pagination {
    float: right;
  }
  .el-input{
    width: 300px;
  }
  /*.addbtn{*/
    /*display: inline-block;*/
    /*margin-right: 10px;*/
  /*}*/
  .el-select{
    width: 110px;
  }
  .mess{
    width: 350px;
  }

</style>
